<template>
  <div style="height:550px;padding:100px;">
    <select-li
      :api="selectList"
      :display-fun="displayFun"
      @li-click="itemClick"
    />
  </div>
</template>

<script>

import SelectLi from "@/components/SelectLi";

export default {
  components: { SelectLi },
  data() {
    return {
      selectList: [
        {
          label: "测试1",
          value: 1
        },
        {
          label: "测试2",
          value: 2
        },
        {
          label: "测试3",
          value: 3
        },
        {
          label: "测试4",
          value: 4
        },
        {
          label: "测试5",
          value: 5
        },
        {
          label: "测试6",
          value: 6
        },
        {
          label: "测试7",
          value: 7
        },
        {
          label: "测试8",
          value: 8
        },
        {
          label: "测试9",
          value: 9
        },
        {
          label: "测试10",
          value: 10
        }
      ],
      displayFun: (item) => {
        return item.label;
      }
    };
  },
  methods: {
    itemClick(item) {
      console.log(item, "itemitem");
    }
  }
};
</script>

<style scoped lang="scss">

</style>
